<template>
  <el-tree
    ref="tree"
    :props="treeProps"
    :load="loadNode"
    lazy
    @node-click="handleNodeClick"
    :render-content="renderContent"
    :filter-node-method="filterNode"
  >
  </el-tree>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      treeProps: {
        label: "name",
        children: "cameras",
        isLeaf: "leaf",
      },
      playingList: [],
    };
  },
  computed: {
    ...mapState(["scale", "siteInfos"]),
  },
  methods: {
    startPreview(data) {
      if (data.videoplayAddr) {
        console.log(data);
        // this.$refs.screenVideoPlayerRef.play({
        //   url: data.videoplayAddr,
        //   type: data.playType,
        //   number: data.number,
        //   name: data.name,
        // });
      } else {
        this.$get("/fireFightingIOT/device/getVideoStream", {
          number: data.number,
        })
          .then((res) => {
            this.productId = data.productId;
            console.log(res.data);

            // this.$refs.screenVideoPlayerRef.play({
            //   url: res.data,
            //   type: data.playType,
            //   number: data.number,
            //   name: data.name,
            //   productId: data.productId,
            // });
          })
          .catch((err) => {
            this.$message.error(err.msg || "系统错误");
          });
      }
    },
    handleNodeClick(data) {
      if (data.type == "none" || !data.number || data.isActive) {
        return;
      }
      this.$emit("transferData", data);
      // this.$get("/fireFightingIOT/device/getVideoPlayTime", {
      //   number: data.number,
      // })
      //   .then((res) => {
      //     if (res.code == 0) {
      //       this.startPreview(data);
      //       data.isActive = true;
      //     }
      //   })
      //   .catch((err) => {
      //     this.$message.error(err.msg);
      //   });
    },
    renderContent(h, { node, data, store }) {
      if (!data.productId) {
        if (data.type == "none") {
          return (
            <span class="custom-tree-node">
              <span class="none">{data.name}</span>
            </span>
          );
        } else {
          return (
            <span class="custom-tree-node">
              <span>{data.name}</span>
            </span>
          );
        }
      } else {
        if (this.playingList.indexOf(data.number) >= 0) {
          return (
            <span class="custom-tree-node active">
              <i class="iconfont icon-video"></i>
              <i class="iconfont icon-play"></i>
              <span>{data.name}</span>
            </span>
          );
        }
        return (
          <span class="custom-tree-node">
            <i class="iconfont icon-video"></i>
            <i class="iconfont icon-play"></i>
            <span>{data.name}</span>
          </span>
        );
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getDevice(businessId, cbk) {
      this.$get("/fireFightingIOT/device/deviceCameraList", {
        businessId: businessId,
      }).then(
        (res) => {
          let deviceList = res.data.map((item) => {
            item.isActive = false;
            item.leaf = true;
            return item;
          });

          cbk && cbk(deviceList);
        },
        (err) => {
          this.loading = false;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getData(cbk) {
      this.loading = true;
      if (this.siteInfos.userType != 1) {
        cbk &&
          cbk([{ name: this.siteInfos.homeName, id: this.siteInfos.homeId }]);
        return;
      }
      this.$get("/business/business/businessList").then(
        (res) => {
          this.loading = false;
          let list = res.data.filter((item) => item.cameraType == 1);
          cbk && cbk(list);
        },
        (err) => {
          this.loading = false;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getData((list) => {
          resolve(list);
        });
      } else if (node.level > 0) {
        this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
        this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来
        this.getDevice(node.data.id, (list) => {
          if (list.length == 0) {
            resolve([{ name: "暂无设备", leaf: true, type: "none" }]);
          } else {
            resolve(list);
          }
        });
      }
    },
  },
};
</script>

<style></style>
